<div id="audio_settings">
    <div class="inline-drawer">
        <div class="inline-drawer-toggle inline-drawer-header">
            <b>Dynamic Audio</b>
            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
        </div>
        <div class="inline-drawer-content">
            <div>
                <label class="checkbox_label" for="audio_enabled">
                    <input type="checkbox" id="audio_enabled" name="audio_enabled">
                    <small>Enabled</small>
                </label>
                <div id="audio_bgm_dynamic_enable_div">
                    <label class="checkbox_label" for="audio_dynamic_bgm_enabled">
                        <input type="checkbox" id="audio_dynamic_bgm_enabled" name="audio_dynamic_bgm_enabled">
                        <small>Enable expression BGM switch (req. character expression)</small>
                    </label>
                </div>
                <div id="audio_debug_div">
                    <label class="checkbox_label" for="audio_debug">
                        <input type="checkbox" id="audio_debug" name="audio_debug">
                        <small>Debug</small>
                    </label>
                </div>
                <div class="flex row-reverse align-center justify-end gap-12">
                    <label for="audio_refresh_assets">Refresh assets</label>
                    <div id="audio_refresh_assets" class="menu_button btn-refresh">
                        <i class="fa-solid fa-refresh fa-lg"></i>
                    </div>
                </div>
            </div>
            <div>
                <div class="audio-ui-block">
                    <label for="audio_bgm_volume_slider">Music</label>
                    <div class="audio-container">
                        <div class="mute-div">
                            <div id="audio_bgm_mute" class="menu_button audio-player-button">
                                <i class="fa-solid fa-volume-high fa-lg fa-fw" id="audio_bgm_mute_icon"></i>
                            </div>
                        </div>
                        <div class="vol">
                            <input type="range" class ="audio-slider" id ="audio_bgm_volume_slider" value = "0" maxlength ="100">
                        </div>
                        <div class="playlist">
                            <select id="audio_bgm_select">
                            </select>
                        </div>
                        <div class="audio-mixer-element audio-mixer-lock">
                            <div id="audio_bgm_lock" class="menu_button audio-player-button">
                                <i class="fa-solid fa-repeat fa-lg fa-fw" id="audio_bgm_lock_icon"></i>
                            </div>
                        </div>
                        <div class="audio-mixer-element audio-mixer-random">
                            <div id="audio_bgm_random" class="menu_button audio-player-button">
                                <i class="fa-solid fa-random fa-lg fa-fw" id="audio_bgm_random_icon"></i>
                            </div>
                        </div>
                    </div>
                    <audio id="audio_bgm" controls src="">
                </div>
                <div>
                    <label for="audio_ambient_volume_slider">Ambient</label>
                    <div class="audio-container">
                        <div class="mute-div">
                            <div id="audio_ambient_mute" class="menu_button audio-player-button">
                                <i class="fa-solid fa-volume-high fa-lg fa-fw" id="audio_ambient_mute_icon"></i>
                            </div>
                        </div>
                        <div class="vol">
                            <input type="range" class ="audio-slider" id ="audio_ambient_volume_slider" value = "0" maxlength ="100">
                        </div>
                        <div class="playlist">
                            <select id="audio_ambient_select">
                            </select>
                        </div>
                        <div class="audio-mixer-element">
                            <div id="audio_ambient_lock" class="menu_button audio-player-button">
                                <i class="fa-solid fa-lock-open fa-lg fa-fw" id="audio_ambient_lock_icon"></i>
                            </div>
                        </div>
                    </div>
                    <audio id="audio_ambient" controls src="">
                </div>
                <div>
                    <label for="audio_bgm_cooldown">Music update cooldown (in seconds)</label>
                    <input id="audio_bgm_cooldown" class="text_pole wide30p">
                </div>
            </div>
            <div>
                <b>Hint:</b>
                <i>
                    Create new folder in the
                    <b>/data/&lt;user-handle&gt;/characters/</b>
                    folder and name it as the name of the character.
                    Create a folder name <b>bgm</b> inside of it.
                    Put bgm music with expressions there. File names should follow the pattern:
                    <it>[expression_label]_[number].mp3</it>
                    By default one of the <it>neutral_[number].mp3</it> will play if classify module is not active.
                </i>
            </div>
        </div>
    </div>
</div>
